<template>
	<view class="mine" :style="{paddingTop:paddingHeight+'px'}">
		<div class="statusBarHeight" :style="{height: statusBarHeight + 'px'}"></div>
		<div class="img-bg" :style="{height: statusBarHeight + 190 + 'px'}">
			<image :src="www + 'imgs/mine/bg.png'" mode="scaleToFill"></image>
		</div>
		<div class="navbar-wrap" :style="{top:  statusBarHeight + 'px'}">
			<div class="navbar" :style="{top: statusBarHeight + 'px'}">
				<!-- #ifdef MP-WEIXIN -->
				<div class="c-tit">去嗨鸭</div>
				<!-- #endif -->
			</div>

			<view class="info-wrap">
				<view class="avatar" @click="pageJumps('/pagesUser/userInfo')">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="name-wrap" @click="pageJumps('/pagesUser/userInfo')">
					<view class="level_align">
						<text class="tp-fz32 tp-fw500 tp-mr20">{{userInfo.nickname}}</text>
						<image class="leve-img" :src="wwwImgUrl + getCustomerInfo.levelImg" mode="aspectFill"></image>
					</view>
					<text class="verified">实名认证：{{userInfo.assetsStatus == 2 ? '已认证' : '未认证'}}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="share-btn" @click="handShare">
					<image src="../../static/imgs/icons/share-icon.png" mode=""></image>
				</view>
				<!-- #endif -->
			</view>

			<view class=" tp-ptb0lr30 ">
				<view class="tp-bgf tp-bbox tp-br12 tp-pd30 tp-fc333 tp-fz30 level_align flex_between">
					<view class="column_align" @click="pageJumps('../../pagesUser/collect')">
						<view class="tp-fw600">
							{{getCustomerInfo.collectNum || 0}}
						</view>
						<view class="tp-fz24 tp-fc666 tp-mt15">
							我的收藏
						</view>
					</view>
					<view class="column_align" @click="pageJumps('../../pagesUser/myJifen')">
						<view class="tp-fw600">
							{{getCustomerInfo.rewardPoint || 0}}
						</view>
						<view class="tp-fz24 tp-fc666 tp-mt15">
							我的积分
						</view>
					</view>
					<view class="column_align" @click="pageJumps('../../pagesUser/wallet')">
						<view class="tp-fw600">
							{{getCustomerInfo.balance || 0}}
						</view>
						<view class="tp-fz24 tp-fc666 tp-mt15">
							我的钱包
						</view>
					</view>
					<view class="column_align" @click="pageJumps('../../pagesUser/mineCouponList')">
						<view class="tp-fw600">
							{{getCustomerInfo.couponNum || 0}}
						</view>
						<view class="tp-fz24 tp-fc666 tp-mt15">
							我的优惠券
						</view>
					</view>
				</view>
			</view>
		</div>
		<!-- #ifdef H5 -->
		<view class="content tp-m0a" :style="{marginTop: statusBarHeight + 220 + 'px'}">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="" style="height: 434rpx;"> </view>
			<view class="content tp-m0a">
				<!-- #endif -->
				<view class="tp-pd30 tp-bgf tp-br12" v-if="trafficList.length && isCheck">
					<view>
						<view class="level_align tp-fc333 tp-fz28 tp-fw600">
							<text>交通订单</text>
						</view>
						<view class="level_align flex_around tp-mt20">
							<view class="column_align" v-for="(item, index) in trafficList" :key="index"
								@click="pageJumps(item.url)">
								<view class="tp-img64">
									<image :src="item.icon" mode=""></image>
								</view>
								<text class="tp-lh44">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tp-pd30 tp-bgf tp-br12 tp-mt20" v-if="elseList.length && isCheck">
					<view>
						<view class="level_align tp-fc333 tp-fz28 tp-fw600">
							<text>其他订单</text>
						</view>
						<view class="level_align flex_between flex_wrap">
							<view class="column_align tp-mt20" style="width: 30%;" v-for="(item, index) in elseList"
								:key="index" @click="pageJumps(item.url)">
								<view class="tp-img64">
									<image :src="item.icon" mode=""></image>
								</view>
								<text class="tp-lh64">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 我的行程 -->
				<view class="tp-h98 tp-mt20 tp-ptb0lr30 tp-bbox level_align tp-bgf tp-br12 flex_between"
					@click="pageJumps('/pagesUser/my-journey')">
					<view class="level_align">
						<image class="tp-mr20 tp-fz28 tp-fc333" style="width: 44rpx;height: 44rpx;"
							src="../../static/imgs/mine/xingcheng.png" mode=""></image>
						<text>我的行程</text>
					</view>
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>


				<view class="tp-bgf tp-mt20 tp-pd30 tp-bbox tp-br12" v-if="list.length">
					<view class="level_align tp-fc333 tp-fz28 tp-fw600">
						<text>常用功能</text>
					</view>
					<view class="level_align flex_between flex_wrap">
						<view class="column_align tp-mt20" style="width: 30%;" v-for="(item,index) in list" :key="index"
							@click="handlGo(item.url,index,item.name)">
							<image class="img-icon" :src="item.icon" mode=""></image>
							<view class="tp-lh64">
								{{item.name || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 客服服务电话痰喘 S-->
			<!-- <CommonServicePhone ref="takePhone" :list="KePhone"></CommonServicePhone> -->
			<!-- 客服服务电话痰喘 E-->
			<!-- 
			<uni-popup type="center" ref="takePhone" :maskClick="true">
				<view class="takephone-wrap">
					<view class="tit">请选择客服电话</view>
					<view class="phone_list">
						<view class="phone_item" v-for="(it_phone, in_phone) in servicePhoneList" :key="in_phone" @click="makePhoneCall(it_phone)">
							<image class="phone-icon" src="../../static/imgs/icons/phone1-icon.png" mode=""></image>
							<text class="num">{{it_phone}}</text>
						</view>
					</view>
					<uni-icons @click="takePhoneHide" class="close-icon" type="close" size="30" color="#ccc"></uni-icons>
				</view>
			</uni-popup> -->

			<uni-popup type="center" ref="takePhone" :maskClick="false">
				<view class="takephone-wrap">
					<image class="kefu-tu" :src="www + 'imgs/other/kefu.png'" mode=""></image>
					<view class="tp-red tp-fz32 tp-lh44 tp-mt30">
						点击拨打电话联系客服
					</view>
					<view class="phone_list">
						<view class="phone_item center_combo tp-ptb0lr30 tp-bbox"
							v-for="(item, index) in servicePhoneList" :key="index" @click="makePhoneCall(item)">
							<image class="phone-icon" src="../../static/imgs/icons/phone1-icon.png" mode=""></image>
							<view class="level_align">
								<text class="tp-mr10 tp-fc333 tp-fz30">咨询客服：</text>
								<text class="num">{{item}}</text>
							</view>
						</view>
					</view>
					<uni-icons @click="takePhoneHide" class="close-icon" type="close" size="34" color="#fff">
					</uni-icons>
				</view>
			</uni-popup>

			<view class="hover_btn" @click="handleGoEmergencyContact">
				<image src="../../static/imgs/icons/emergency-icon.png" mode=""></image>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<Share ref="share" :info="shareInfo" :swiperList="swiperList" shareParam="''"></Share>
			<!-- #endif -->

		</view>
</template>

<script>
	import Share from '../../components/common/common-share.vue'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			Share,
			// CommonServicePhone
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				paddingHeight: 0,
				userInfo: {
					code: '',
					avatar: '',
					nickname: '',
					assetsStatus: 1
				}, // 用户信息
				trafficList: [{
						id: 1,
						name: '班车',
						icon: require('../../static/imgs/icons/banche-icon.png'),
						url: '../../pagesUser/order/bus.orderList'
					},
					{
						id: 2,
						name: '拼车',
						icon: require('../../static/imgs/icons/pingche-icon.png'),
						url: '../../pagesUser/order/carpool.orderList'
					},
					{
						id: 3,
						name: '包车',
						icon: require('../../static/imgs/icons/baoche-icon.png'),
						url: '../../pagesUser/order/chartered.orderList'
					},
					{
						id: 4,
						name: '租车',
						icon: require('../../static/imgs/icons/rent-icon.png'),
						url: '../../pagesUser/order/rent.orderList'
					},
				],
				elseList: [{
						id: 1,
						name: '商城',
						icon: require('../../static/imgs/mine/shangcheng.png'),
						url: '../../pagesShop/list/shopOrderList'
					},
					{
						id: 2,
						name: '景区',
						icon: require('../../static/imgs/mine/jingqu.png'),
						url: '../../pagesUser/order/scenicOrderList'
					},
					{
						id: 3,
						name: '酒店',
						icon: require('../../static/imgs/mine/jiduian.png'),
						url: '../../pagesUser/order/hotelOrderList'
					},
					{
						id: 4,
						name: '旅游',
						icon: require('../../static/imgs/mine/lvyou.png'),
						url: '../../pagesUser/order/travelOrderList'
					},
					{
						id: 5,
						name: '定制旅游',
						icon: require('../../static/imgs/mine/dingzhi.png'),
						url: '../../pagesUser/order/makeOrderList'
					},
					// #ifdef H5
					{},
					// #endif
					// #ifdef MP-WEIXIN
					{
						id: 6,
						name: '拼团/砍价',
						icon: require('../../static/imgs/mine/kanjia.png'),
						url: '../../pagesShop/list/shopOrderList2'
					},
					// #endif
				],
				list: [{
						name: '我的车票',
						icon: require('../../static/imgs/icons/chepiao-icon.png'),
						url: '../../pagesUser/mineTicketList'
					}, {
						name: '常用联系人',
						icon: require('../../static/imgs/icons/gywm-icon.png'),
						url: '../../pagesUser/linkMan'
					}, {
						name: '我的推广',
						icon: require('../../static/imgs/icons/feiji-icon.png'),
						url: '../../pagesUser/promotion'
					}, {
						name: '我的地址',
						icon: require('../../static/imgs/icons/mine-add.png'),
						url: '../../pagesUser/addressList'
					}, {
						name: '文章资讯',
						icon: require('../../static/imgs/icons/wenzhang.png'),
						url: '../../pagesUser/txtConsult'
					},
					{
						name: '意见反馈',
						icon: require('../../static/imgs/icons/tousu-icon.png'),
						url: '../../pagesUser/complaint'
					},
					{
						name: '我的发票',
						icon: require('../../static/imgs/icons/fapiao-icon.png'),
						url: '../../pagesUser/invoice'
					}, {
						name: '商家入驻',
						icon: require('../../static/imgs/icons/shop.png'),
						url: '../../pagesUser/recruitShop'
					},
					{
						name: '司机入驻',
						icon: require('../../static/imgs/icons/siji.png'),
						url: '../../pagesUser/driverEnter'
					},
					{
						name: '关于我们',
						icon: require('../../static/imgs/icons/gywm-icon.png'),
						url: '/pages/others/depositRule?type=7&name=关于我们'
					},
					{
						name: '联系客服',
						icon: require('../../static/imgs/icons/lxkf-icon.png'),
						url: ''
					},
					{
						name: '设置',
						icon: require('../../static/imgs/icons/shezhi-icon.png'),
						url: '../../pagesUser/setting'
					}
				],
				servicePhoneList: [], // 客服电话
				swiperList: [], // 分享的海报背景图
				shareInfo: {}, // 分享的海报信息
				isCheck: false, // true正常显示 false隐藏
			};
		},
		onLoad() {
			this.mixinInitMap()
		},
		async onShow() {
			
			this.getBanBen()
			this.getServicePhone()
			if (this.$store.getters.getToken) {
				this.getUserInfo()
				await this.getcustomerInfo()
			}
			

		},
		onUnload() {
			// #ifdef MP-WEIXIN
			this.$refs.share.hide()
			// #endif
		},
		onShareAppMessage(res) {
			return {
				title: '和我一起，说走就走',
				path: '/pages/tabbar/home?inviteCode=' + this.getCustomerInfo.inviteCode,
			}
		},
		methods: {
			// 版本
			getBanBen() {
				this.$http.get(this.$api.isCheck).then(res => {
					if (res.code === 200) {
						if (res.msg == 1) {
							this.isCheck = false
							this.$store.commit('upIsCheck', false)
							if (this.list[7].name === '商家入驻' && !this.isCheck) {
								this.list.splice(6, 2)
								// this.list.splice(11, 0, {})
							}
						} else {
							this.isCheck = true
							this.$store.commit('upIsCheck', true)
						}
					}
				})
			},
			// 吊起分享
			handShare() {
				this.$http.get(this.$api.miniShare).then(res => {
					if (res.code === 200) {
						res.data.customer.img = this.$regeImg.test(res.data.customer.img) ? res.data.customer.img :
							(this.$imgUrl + res.data.customer.img)
						res.data.qrCode = this.$regeImg.test(res.data.qrCode) ? res.data.qrCode : (this.$imgUrl +
							res.data.qrCode)
						res.data.shareList.map(item => {
							item = this.$regeImg.test(item) ? item : (this.$imgUrl + item)
						})
						this.shareInfo = res.data
						this.swiperList = res.data.shareList
						// this.shareInfo.qrCode = 'https://hanglv.ysxapp.cn/profile/upload/2020/09/16/0d6bdfa12e58af420a39ee22c6b9223a.png'
						this.$refs.share.show()
					}
				})
			},
			// 获取客服电话
			getServicePhone() {
				this.$http.get(this.$api.getServicePhone + '?type=5').then(res => {
					if (res.code === 200) {
						this.servicePhoneList = res.data
					}
				})
			},
			// getPaddingHeight() {
			// 	let _this = this
			// 	uni.getSystemInfo({
			// 		success(res) { // res - 各种参数
			// 			let info = uni.createSelectorQuery().select(".navbar-wrap");
			// 			info.boundingClientRect(function(data) { //data - 各种参数
			// 				_this.paddingHeight = data.height
			// 			}).exec()
			// 		}
			// 	});
			// },
			handlGo(url, index, name) {
				if (name == '联系客服') {
					this.$refs.takePhone.open()
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			// 关闭删除弹框
			handleCloseModalBox() {
				this.$refs.modalBox.close()
			},
			getUserInfo() {
				this.$http.get(this.$api.getUserInfo).then(res => {
					if (res.code === 200) {
						let {
							avatar,
							nickname,
							assetsStatus
						} = res.data

						if (!avatar.startsWith('http')) {
							this.userInfo.avatar = this.$imgUrl + avatar
						} else {
							this.userInfo.avatar = avatar
						}
						this.userInfo.nickname = nickname
						this.userInfo.assetsStatus = assetsStatus
						// uni.getImageInfo({
						// 	src: res.data.avatar,
						// 	success: ({
						// 		path
						// 	}) => { // 图片线上地址转本地缓存地址，方便canvas画图
						// 		this.userInfo.avatar = path
						// 	}
						// })
					}
				})
			},
			// getCode() {
			// 	uni.getImageInfo({
			// 		src: 'http://temp.im/100x100',
			// 		success: ({
			// 			path
			// 		}) => { // 图片线上地址转本地缓存地址，方便canvas画图
			// 			this.userInfo.code = path
			// 		}
			// 	})
			// },
			// 紧急联系人
			handleGoEmergencyContact() {
				uni.navigateTo({
					url: '/pagesTravel/emergencyContactList'
				});
			},
			takePhoneHide() {
				this.$refs.takePhone.close()
			},
			// 拨打电话
			makePhoneCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			//去富文本页面
			goToFWb(type, name) {
				uni.navigateTo({
					url: '/pages/others/depositRule?type=' + type + '&name=' + name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		.img-bg {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
		}

		.navbar-wrap {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			// background-color: #f5f5f5;


			// position: relative;


			.navbar {
				height: 88rpx;
				line-height: 88rpx;
				justify-content: space-evenly;
				text-align: center;
				color: #fff;
				font-size: 36rpx;
			}

			.info-wrap {
				width: 690rpx;
				margin: 0 auto;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				padding-bottom: 60rpx;

				.avatar {
					height: 120rpx;
					width: 120rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 40rpx;
					background-color: pink;
				}

				.name-wrap {
					flex: 1;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					font-size: 28rpx;

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.share-btn {
					width: 36rpx;
					height: 36rpx;
				}
			}


		}




		.content {
			border-radius: 12rpx;
			width: 690rpx;
			box-sizing: border-box;


			.input-wrap {
				height: 104rpx;
				border-bottom: 1px solid #ebebeb;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:last-child {
					border: none;
				}

				.l-wrap {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.icon {
						height: 44rpx;
						width: 44rpx;
						margin-right: 30rpx;
					}
				}
			}
		}
	}

	.order-wrap {
		// height: 226rpx;
		border-radius: 12rpx;
		width: 690rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.tit-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tit {
				font-size: 28rpx;
				font-weight: bold;
			}

			.more {
				font-size: 24rpx;
				color: #999;
			}
		}

		.list {
			display: flex;
			justify-content: space-between;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;

				.icon {
					height: 64rpx;
					width: 64rpx;
				}
			}
		}
	}

	// .takephone-wrap {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	width: 420rpx;
	// 	border-radius: 12rpx;
	// 	background-color: #fff;
	// 	padding: 58rpx 0;
	// 	position: relative;

	// 	.tit {
	// 		font-size: 32rpx;
	// 		font-weight: bold;
	// 	}

	// 	.close-icon {
	// 		position: absolute;
	// 		top: -30rpx;
	// 		right: -30rpx;
	// 		z-index: 2;
	// 	}

	// 	.phone_list {
	// 		.phone_item {
	// 			font-size: 30rpx;
	// 			margin-top: 40rpx;
	// 			display: flex;
	// 			align-items: center;

	// 			.phone-icon {
	// 				height: 64rpx;
	// 				width: 64rpx;
	// 				margin-right: 20rpx;
	// 			}
	// 		}
	// 	}
	// }
	.takephone-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 546rpx;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
		padding-bottom: 60rpx;
		margin-top: -80rpx;


		.kefu-tu {
			width: 546rpx;
			height: 278rpx;
		}

		.close-icon {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
		}

		.phone_list {
			width: 100%;

			.phone_item {
				font-size: 30rpx;
				margin-top: 40rpx;

				.phone-icon {
					height: 32rpx;
					width: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.img-icon {
		width: 44rpx;
		height: 44rpx;
	}

	.leve-img {
		width: 108rpx;
		height: 32rpx;
		border-radius: 20rpx;
	}
</style>
